<template>
  <div class="fen_card">
    <div class="fen_card_title">{{ info.name }}</div>
    <div class="fen_card_l">
      <div class="fen_card_l_c" style="height:100%;">
        <div
          :class="{
            'text-navy': deviceDetails.lightStatus === 'on'
          }"
        >
          <div style="position: relative;">
            <!-- 站位图片 -->
            <!-- <img style="width: 100%;" src="">
            <svg-icon icon-class="fj_light_status" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" /> -->
            <img v-if="deviceDetails.lightStatus === 'on'" style="height:100px;" src="~@/assets/images/icons/light_on.png">
            <img v-if="deviceDetails.lightStatus === 'off'" style="height:100px;" src="~@/assets/images/icons/light_off.png">
          </div>
          <div style="margin-top:-10px;height: 10px;">{{ deviceDetails.lightStatus === 'on' ? '运行中' : '停止' }}</div>
        </div>
        <div style="margin-top:18px;">
          <el-button :loading="loading" type="primary" plain size="mini" style="width:100%" @click="handleView">查看详情</el-button>
        </div>
        <div style="margin-top:10px;">
          <el-button :disabled="!checkPermi(['lighting:control:control'])" :loading="controlLoading" type="primary" plain size="mini" style="width:100%" @click="handleControl">照明控制</el-button>
        </div>
      </div>
    </div>
    <div class="fen_card_info">
      <el-form ref="form" label-width="86px" size="mini" label-suffix=":">
        <el-form-item label="设备名称" style="margin-bottom:0;">
          <el-tooltip :content="info.name" placement="top-start"><div class="text-cut">{{ info.name }}</div></el-tooltip>
        </el-form-item>
        <!-- <el-form-item label="设备位置" style="margin-bottom:0;">
          <el-tooltip :content="info.locationName" placement="top-start"><div class="text-cut">{{ info.locationName }}</div></el-tooltip>
        </el-form-item> -->
        <el-form-item label="设备编号" style="margin-bottom:0;">
          <el-tooltip :content="info.sn" placement="top-start"><span class="text-cut">{{ info.sn }}</span></el-tooltip>
        </el-form-item>
        <el-form-item label="设备通道号" style="margin-bottom:0;">
          <el-tooltip :content="info.code" placement="top-start"><span class="text-cut">{{ info.code }}</span></el-tooltip>
        </el-form-item>
        <el-form-item style="margin-bottom: 0;" label="是否使用" prop="isUsed">
          <span v-if="info.isUsed == 1">使用</span>
          <span v-if="info.isUsed == 0">未使用</span>
        </el-form-item>
      </el-form>
    </div>
    <Control ref="control" @success="success" />
    <DeviceDetails ref="deviceDetails" />
  </div>
</template>

<script>
import Control from './Control.vue'
// import Details from './Details.vue'
import { getTnnelSection, getDeviceBySection, deviceDetails } from '@/api/fjgs/light'
import DeviceDetails from './DeviceDetails.vue'
import { checkPermi } from '@/utils/permission'

export default {
  components: {
    Control,
    DeviceDetails
  },
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      controlLoading: false,
      deviceDetails: {},
      timerr: null
    }
  },
  created() {
    this.getDeviceDetails()
    this.loopDeviceDetails()
  },
  beforeDestroy() {
    clearTimeout(this.timerr)
  },
  methods: {
    checkPermi: checkPermi,
    loopDeviceDetails() {
      const _this = this
      this.timerr = setTimeout(() => {
        _this.getDeviceDetails().finally(() => {
          _this.loopDeviceDetails()
        })
      }, 30000)
    },
    handleControl() {
      // const row = this.info
      this.controlLoading = true
      this.getDeviceDetails().then(() => {
        this.controlLoading = false
        this.$refs.control.open(this.deviceDetails)
      })
      // deviceDetails({
      //   sn: row.sn,
      //   code: row.code,
      //   deviceType: row.deviceType
      // }).then(response => {
      //   const details = {
      //     deviceType: row.deviceType,
      //     ...response.data[0]
      //   }
      //   this.controlLoading = false
      //   this.$refs.control.open(details)
      // })
    },
    handleDetails(row) {
      this.$emit('details')
      // this.$refs.Details.handleView(this.info)
    },
    async getDeviceDetails() {
      const info = this.info
      return await deviceDetails({
        sn: info.sn,
        code: info.code,
        deviceType: info.deviceType
      }).then(response => {
        const details = {
          deviceType: info.deviceType,
          ...response.data[0]
        }
        this.deviceDetails = details
      })
    },
    handleView() {
      // const row = this.info
      this.loading = true
      this.getDeviceDetails().then(() => {
        this.loading = false
        this.$refs.deviceDetails.open(this.deviceDetails)
      })
      // deviceDetails({
      //   sn: row.sn,
      //   code: row.code,
      //   deviceType: row.deviceType
      // }).then(response => {
      //   const details = {
      //     deviceType: row.deviceType,
      //     ...response.data[0]
      //   }
      //   this.loading = false
      //   this.$refs.deviceDetails.open(details)
      // })
    },
    success() {
      this.$emit('success')
    }
  }
}
</script>

<style lang="scss" scoped>
.fen_card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    min-width: 350px;
    max-width: 264px;
    // width: 362px;
    height: 258px;
    background-image: url('~@/assets/images/statistics/bg.png');
    background-size: cover;
    // padding-top: 13.8%;
    padding-bottom: 20px;
    border: 1px solid #e6ebf5;
    border-radius: 2px;
    // overflow: hidden;
   .fen_card_title {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 15px;
        font-weight: 500;
        color: #FFFFFF;
        height: 25%;
        padding: 5px 10.7% 0 10px;
        background-image: url('./tit_bg.png');
        background-size: 100% 100%;
        z-index: 1;
   }
   .fen_card_l {
        // width: 128px;
        // display: flex;
        // align-items: flex-end;
        // justify-content: center;
        // box-sizing: border-box;
        flex: 0 0 34%;
        padding: 0 6.6%;
        text-align: center;
        color: #AAAAAA;
        .success {
          color: var(--color-success);
        }
        .error {
          color: var(--color-danger);
        }
        // .fen_card_l_c {
        //   max-width: 80px;
        // }
   }
   .fen_card_info {
      box-sizing: border-box;
      max-width: 66%;
      flex: 1;
      padding:0 16px 0 4%;
      &::v-deep {
        .el-form-item__label {
          color: #888;
          font-size: 13px;
          // text-align:justify;
        }
      }
   }
}
</style>
